<template>
  <div class="login">
    <div class="login_ca">
      <div class="header">
        <img src="@/assets/images/login_img/61201.png" alt="" />
      </div>
      <div style="margin-right: 10%">
        <div class="ca_form">
          <div class="ca_conter">
            <div>
              <img src="@/assets/images/login_img/61202.png" alt="" />
            </div>
            <div class="title">
              <p><b>系统登录</b><small>/</small><small>Login</small></p>
            </div>
            <div>
              <ul class="menu_ul">
                <li @click="setActive(0)" :class="active == 0 ? 'active' : ''">
                  企业登录
                </li>
                <li @click="setActive(1)" :class="active == 1 ? 'active' : ''">
                  主管部门登录
                </li>
                <li @click="setActive(2)" :class="active == 2 ? 'active' : ''">
                  主管部门盖章登录
                </li>
              </ul>
            </div>
            <div v-if="active == 0 || active == 2">
              <p>
                <img src="@/assets/images/login_img/61204.png" alt="" />
              </p>
              <p style="color: #0255c9; margin: 25px 0">
                请确认安装好CA证书驱动，并将CA证书插入计算机USB口
              </p>
              <p>
                <input
                  type="password"
                  v-model="pin"
                  class="codekey"
                  placeholder="请输入PIN码"
                />
              </p>
              <Verify
                @success="caLogin"
                :mode="'pop'"
                :captchaType="'blockPuzzle'"
                :imgSize="{ width: '330px', height: '155px' }"
                ref="verify"
              ></Verify>
              <el-form
                ref="loginForm"
                :model="loginForm"
                :rules="loginRules"
                class="login-form"
              ></el-form>

              <div class="btn" @click="handleLogin">
                <b v-if="!loading">登 录</b>
                <b v-else>登 录 中...</b>
              </div>
            </div>

            <div v-if="active == 1">
              <div class="olform">
                <el-form
                  ref="backLoginForm"
                  :model="backLoginForm"
                  :rules="backLoginRules"
                  class="login-form"
                >
                  <el-form-item prop="username">
                    <el-input
                      v-model="backLoginForm.username"
                      type="text"
                      auto-complete="off"
                      placeholder="账号"
                    >
                      <svg-icon
                        slot="prefix"
                        icon-class="user"
                        class="el-input__icon input-icon"
                      />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="backLoginForm.password"
                      type="password"
                      auto-complete="off"
                      placeholder="密码"
                      @keyup.enter.native="handleSystemLogin"
                    >
                      <svg-icon
                        slot="prefix"
                        icon-class="password"
                        class="el-input__icon input-icon"
                      />
                    </el-input>
                  </el-form-item>
                  <el-checkbox
                    v-model="backLoginForm.rememberMe"
                    style="margin: 0px 0px 25px 0px"
                    >记住密码</el-checkbox
                  >
                  <Verify
                    @success="capctchaCheckSuccess"
                    :mode="'pop'"
                    :captchaType="'blockPuzzle'"
                    :imgSize="{ width: '330px', height: '155px' }"
                    ref="verify"
                  ></Verify>
                  <div class="btn" @click="handleSystemLogin">
                    <b v-if="!loading">登 录</b>
                    <b v-else>登 录 中...</b>
                  </div>
                </el-form>
              </div>
            </div>

            <div>
              <br />
              <el-link
                style="color: red"
                href="http://112.103.231.221:9002/CAUSER/"
                target="_blank"
                >CA注册</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-link @click="download()" target="_blank" style="color: red"
                >使用说明书下载</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-link
                style="color: red"
                href="http://111.42.127.73:8090/dhmcmsp/indexAction_ukeyDownload.action"
                target="_blank"
                >加密锁驱动及CA证书驱动下载</el-link
              ><el-divider direction="vertical"></el-divider>
              <el-link
                @click="downloadSignature()"
                target="_blank"
                style="color: red"
                >盖章插件下载</el-link
              >
            </div>
            <br />
            <el-link
              @click="startVideo()"
              target="_blank"
              style="color: #ff0000"
              >盖章操作视频</el-link
            >
          </div>
        </div>
      </div>
      <div class="footer">
        <p>Copyright©2017-2023　版权所有·黑龙江省住房和城乡建设厅</p>
        <p>
          地址：哈尔滨市道里区群力新区景江西路888号　技术咨询：15764535737　技术支持：哈尔滨天健高新技术有限公司
        </p>
      </div>
      <div class="ercode">
        <div>
          <img src="@/assets/app/android.png" alt="" width="124" />
          <p>安卓应用下载</p>
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <vue-core-video-player
        :src="videoSource"
        :cover="cover"
        :title="title"
        autoplay
        loop="true"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Verify from "@/components/Verifition/Verify";
import { getCASerialNum } from "@/api/ca/ca";
import { encrypt1, getUuid } from "@/api/system/encrypt";

export default {
  components: { Verify },
  name: "Login",
  data() {
    return {
      videoSource: [
        {
          src: "/static/play.mp4",
          resolution: 360,
        },
      ],
      cover: "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",
      title: "企业账户产权备案盖章、主管部门账户产权备案盖章操作引导",

      active: 0,
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type: "ca",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      backLoginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type: "system",
      },
      backLoginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      pin: "",
      open: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    startVideo() {
      this.open = true;
    },
    download() {
      let a = document.createElement("a");
      a.href = `/static/操作手册.zip`;
      a.download = "操作手册.zip";
      a.click();
    },
    downloadSignature() {
      let a = document.createElement("a");
      a.href = `/static/操作手册/PC端操作手册/黑龙江省住建厅签章系统-2.5_setup.exe`;
      a.download = "黑龙江省住建厅签章系统-2.5_setup.exe";
      a.click();
    },
    setActive(n) {
      this.active = n;
    },
    caLogin(params) {
      let that = this;
      this.loginButtonLoading = true;
      let pin = that.pin;
      getCASerialNum(pin, (caSerialNum) => {
        // console.log("ca", pin, caSerialNum);
        let userKey = caSerialNum + "hanhucheng" + getUuid();
        let encryptSerialNum = encrypt1(userKey);
        // console.log("加密后", encryptSerialNum);
        if (caSerialNum) {
          that.loginForm.username = encryptSerialNum;
          that.loginForm.password = "";
          that.loginForm.code = params.captchaVerification;
          that.loginForm.type = "ca";
          that.loading = true;
          // if (that.loginForm.rememberMe) {
          //   Cookies.set("username", that.loginForm.username, { expires: 30 });
          //   Cookies.set("password", encrypt(that.loginForm.password), { expires: 30, });
          //   Cookies.set("rememberMe", that.loginForm.rememberMe, { expires: 30 });
          // } else {
          //   Cookies.remove("username");
          //   Cookies.remove("password");
          //   Cookies.remove("rememberMe");
          // }
          // console.log('aa',that.loginForm);
          that.$store
            .dispatch("Login", that.loginForm)
            .then(() => {
              that.$router.push({ path: that.redirect || "/" }).catch(() => {});
            })
            .catch(() => {
              that.loading = false;
            });
        } else {
          that.loginButtonLoading = false;
        }
      });
    },
    caLoginSystem(params) {},
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    capctchaCheckSuccess(params) {
      this.backLoginForm.code = params.captchaVerification;
      this.loading = true;
      if (this.backLoginForm.rememberMe) {
        Cookies.set("username", this.backLoginForm.username, { expires: 30 });
        Cookies.set("password", encrypt(this.backLoginForm.password), {
          expires: 30,
        });
        Cookies.set("rememberMe", this.backLoginForm.rememberMe, {
          expires: 30,
        });
      } else {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      this.$store
        .dispatch("Login", this.backLoginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || "/" }).catch(() => {});
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$refs.verify.show();
        }
      });
    },
    handleSystemLogin() {
      this.$refs.backLoginForm.validate((valid) => {
        if (valid) {
          this.$refs.verify.show();
        }
      });
    },
    // handleLogin() {
    //   this.$refs.loginForm.validate(valid => {
    //     if (valid) {
    //       this.loading = true;
    //       if (this.loginForm.rememberMe) {
    //         Cookies.set("username", this.loginForm.username, { expires: 30 });
    //         Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
    //         Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
    //       } else {
    //         Cookies.remove("username");
    //         Cookies.remove("password");
    //         Cookies.remove('rememberMe');
    //       }
    //       this.$store.dispatch("Login", this.loginForm).then(() => {
    //         this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
    //       }).catch(() => {
    //         this.loading = false;
    //         if (this.captchaEnabled) {
    //           this.getCode();
    //         }
    //       });
    //     }
    //   });
    // }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
input.codekey {
  width: 80%;
  height: 36px;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
  padding: 0 10px;
  text-align: center;
  font-size: 15px;
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
</style>
<style lang="scss">
.header {
  padding: 15px 20px;
  background-color: white;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.footer {
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
  background-color: white;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.login_ca {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: url(../assets/images/login_img/61200.jpg) no-repeat center center;
  background-size: cover;
}

.ca_form {
  text-align: center;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
}
.ca_conter {
  padding: 20px;
  margin: 16px 16px;
  width: 560px;
  height: auto;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
}

.title {
  background: #006bff;
  border-radius: 4px;
  color: white;
  text-align: left;
  padding-left: 8%;
  overflow: hidden;
  margin: 30px 0 20px 0;
  p {
    border-left: 5px solid #fff;
    height: 40px;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    b,
    small {
      margin: 0 5px;
      font-size: 18px;
    }
    small {
      font-size: 14px;
      display: inline-block;
      margin-top: 5px;
    }
  }
}
.menu_ul {
  display: flex;
  flex-direction: row;
  padding: 0 0 18px 0;
  margin-bottom: 30px;
  li {
    list-style-type: none;
    font-size: 18px;
    text-align: center;
    width: 50%;
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
    &:hover {
      color: #ff6600;
    }
    &.active {
      color: #ff6600;
    }
    &.active::before {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 3px;
      width: 20%;
      left: 0;
      margin: 0 40%;
      background-color: #ff6600;
    }
    &:nth-child(2),
    &:last-child {
      border-left: 1px solid #eeeeee;
    }
  }
  border-bottom: 1px solid #eeeeee;
}

.btn b {
  background: #006bff;
  border-radius: 4px;
  font-size: 18px;
  width: 80%;
  display: inline-block;
  cursor: pointer;
  padding: 14px 0;
  margin: 15px 10% 0 10%;
  color: white;
  &:hover {
    background: #0260e4;
  }
}

.ercode {
  position: fixed;
  top: 60vh;
  left: 5px;
  border-radius: 5px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px #000;
  p {
    font-size: 14px;
    text-align: center;
    margin: 0;
    margin-top: 0px;
  }
}
.olform {
  width: 80%;
  margin: 0 10%;
  .btn b {
    width: 100%;
    margin: 10px 0 0 0;
  }
  form > label {
    float: left;
  }
}

@media (max-width: 1708px) {
  .header img {
    width: 600px;
  }
  .footer,
  .header {
    padding: 10px 20px;
  }
  .ca_conter div:first-child img {
    display: none;
  }
  .menu_ul {
    margin-bottom: 20px;
  }
  .menu_ul li {
    font-size: 16px;
  }
  .title {
    margin: 0;
  }
  .ca_conter {
    width: 460px;
    height: auto;
  }
}
</style>
